<template>
  <div id="personal-bankinternal">
    <div class="bankinternal-box">
      <NavBar title="添加收款方式" left-arrow @click-left="onClickLeft" />
      <div class="bankinternal">
        <div class="warmprompt">
          <div class="segmentation">
            <Divider :style="{ color: '#000', borderColor: '#303133' }"
              >温馨提示</Divider
            >
          </div>
          <div class="hint">
            请谨慎添加第一张银行卡信息，以后新增的银行卡都将只能添加相同开户人姓名的银行卡
          </div>
        </div>
        <div class="bankinternal-body">
          <Form @submit="onSubmit">
            <Field
              v-model="username"
              name="姓名"
              label="姓名"
              placeholder="请输入姓名"
            />
            <Field
              v-model="cardnumber"
              name="银行卡号"
              label="银行卡号"
              placeholder="请输入银行卡号"
            />
            <Field
              v-model="bankname"
              name="银行名称"
              label="银行名称"
              placeholder="请输入银行名称"
            />
            <Field
              v-model="city"
              name="开户省市"
              label="开户省市"
              placeholder="请输入开户省市"
            />
            <div style="margin: 26px">
              <Button round block type="info" native-type="submit">提交</Button>
            </div>
          </Form>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import { NavBar, Divider, Form, Field, Button } from "vant";
export default {
  components: {
    NavBar,
    Divider,
    Form,
    Field,
    Button,
  },

  data() {
    return {
      username: "", // 姓名
      cardnumber: "", // 银行卡号
      bankname: "", // 银行名称
      city: "", // 开户省市
    };
  },

  // 创建时
  created() {},

  // 方法
  methods: {
    // 跳出
    onClickLeft() {
      console.log("跳出");
      this.$router.go(-1);
    },

    // 点击提交
    onSubmit(values) {
      console.log("submit", values);
    },

    // 网络请求
  },
};
</script>
<style lang="less" scoped>
#personal-bankinternal {
  width: 100vw;
  height: 100vh;
  background-color: #f7f6fb;
  .bankinternal {

    .warmprompt {
      background-color: #fff;
      .segmentation {
        width: 315px;
        height: 30px;
        padding: 10px 30px 0px 30px;
      }
      .hint {
        font-size: 14px;
        color: #303133;
        width: 315px;
        margin: 10px 30px;
        padding-bottom: 20px;
      }
    }
    .bankinternal-body {
      background-color: #fff;
      padding-bottom: 10px;
    }
  }
}
</style>
